<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 物流订单跟踪系统</title>
    <!-- 引入 Bootstrap CSS (如果你打算使用) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 在head部分添加 -->
    <link rel="stylesheet" href="/css/theme.css">
    
    <!-- 修改样式部分 -->
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-color: var(--bg-color);
        }
        .login-container {
            width: 100%;
            max-width: 400px;
            padding: 30px;
            background-color: var(--card-bg);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--box-shadow);
            animation: fadeIn var(--transition-speed);
        }
    </style>
</head>
<body>
<div class="login-container">
    <h2 class="text-center mb-4">用户登录</h2>
    <form id="loginForm" method="POST" action="/perform_login"> <!-- 修改这里的action为/perform_login -->
        <div class="mb-3">
            <label for="username" class="form-label">用户名:</label>
            <input type="text" class="form-control" id="username" name="username" required>
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">密码:</label>
            <input type="password" class="form-control" id="password" name="password" required>
        </div>
        <button type="submit" class="btn btn-primary w-100">登录</button>
    </form>
    <div id="loginError" class="mt-3 text-danger text-center">
        <!-- 登录错误信息将显示在这里 -->
    </div>
    <div class="mt-3 text-center">
        <p>还没有账户? <a href="/register.html">注册</a></p> <!-- 假设有注册页面 -->
        <p><a href="/">返回首页</a></p>
        <p><a href="/admin-login.html" class="btn btn-outline-secondary btn-sm">管理员登录</a></p>
    </div>
    
    <!-- 添加角色说明 -->
    <div class="mt-4 p-3 bg-light rounded">
        <h5 class="text-center">用户角色说明</h5>
        <ul class="small">
            <li><strong>普通用户</strong>：可以下单、查询订单状态</li>
            <li><strong>配送员</strong>：可以接单、更新配送状态</li>
        </ul>
        <p class="small text-center mb-0">如果您需要成为配送员，请在<a href="/register.html">注册页面</a>选择配送员角色</p>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const loginErrorDiv = document.getElementById('loginError');

        if (urlParams.has('error')) {
            loginErrorDiv.textContent = '用户名或密码错误，请重试。';
        }

        if (urlParams.has('logout')) {
            // 可以用一个更友好的提示替换 alert
            const logoutMessageDiv = document.createElement('div');
            logoutMessageDiv.className = 'alert alert-success mt-3 text-center';
            logoutMessageDiv.textContent = '您已成功登出！';
            document.querySelector('.login-container').insertBefore(logoutMessageDiv, loginErrorDiv);
            // 移除 URL 中的 logout 参数，避免刷新时再次显示
            if (window.history.replaceState) {
                const cleanUrl = window.location.pathname;
                window.history.replaceState({ path: cleanUrl }, '', cleanUrl);
            }
        }
    });
</script>
<!-- 引入 Bootstrap JS (如果需要其JS组件) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>